<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入样式 -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../app/lib/ZohoCrmHelper.js" type="text/javascript"></script>
    <script src="../app/lib/ZSDK.js" type="text/javascript"></script>
    <script src="../app/lib/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="../app/lib/ZohoEmbededAppSDK.min.js" type="text/javascript"></script>
    <script src="../app/lib/axios.min.js" type="text/javascript"></script>
    <title>合同变更单</title>
    <style>
        .form-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .form-wrapper {
            width: 80%;
            max-width: 800px;
        }

        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .title {
            text-align: center;
            margin: 20px 0;
        }

        .upload-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
    </style>
</head>

<body>
<div id="app">
    <h1 class="title">签退</h1>

    <div class="form-container">
        <div class="form-wrapper">
            <el-form :model="formInline" label-position="left" label-width="auto">
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="formInline.remark" placeholder="备注"></el-input>
                </el-form-item>

                <el-form-item label="附件">
                    <div class="upload-container">
                        <el-upload
                                class="upload-demo"
                                ref="upload"
                                :action="uploadUrl"
                                :on-success="handleUploadSuccess"
                                :on-error="handleUploadError"
                                :before-upload="beforeUpload"
                                :file-list="fileList"
                                multiple
                                list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-button
                                v-if="fileList.length > 0"
                                size="small"
                                @click="submitUpload">
                            提交附件
                        </el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <div class="button-container">
        <el-button type="primary" @click="onSubmit">确定</el-button>
    </div>
</div>

<script type="text/javascript">
    const app = new Vue({
        el: '#app',
        data() {
            return {
                crmId: "",
                uploadUrl: 'https://example.com/upload', // 替换为实际的上传接口
                fileList: [],
                formInline: {
                    remark: '1231231', // 备注
                    attach: '', // 附件（存储上传后的文件信息）
                },
            };
        },
        mounted() {
            this.initData();
            ZOHO.embeddedApp.init();
        },
        methods: {
            initData() {
                ZOHO.embeddedApp.on("PageLoad", function (data) {
                    app.crmId = data.EntityId;
                });
            },

            // 上传前的处理
            beforeUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过 2MB!');
                }
                return isLt2M;
            },

            // 上传成功的回调
            handleUploadSuccess(response, file, fileList) {
                this.$message.success('上传成功');
                // 处理上传成功后的逻辑，例如保存文件信息
                this.formInline.attach = JSON.stringify(fileList.map(f => ({
                    name: f.name,
                    url: f.response.url || f.url
                })));
            },

            // 上传失败的回调
            handleUploadError(err, file, fileList) {
                this.$message.error('上传失败');
                console.error(err);
            },

            // 提交所有附件
            submitUpload() {
                this.$refs.upload.submit();
            },

            // 表单提交
            onSubmit() {
                // 处理提交逻辑
                alert('submit!' + this.crmId);
                console.log('提交数据:', this.formInline);
            },
        }
    });
</script>
</body>

</html>
